<div class="row">
	<div class="span3">
		<img src="/images/navigation/first.png" class="first"/>
		<img src="/images/navigation/prev.png" class="prev"/>
	</div>
	<div class="span4 centered">
		<input type="text" value="" class="pagedisplay" />
		<span class="pagesizewrap">Antal per sida
			<select class="pagesize">
				<option selected="selected"  value="10">10</option>
				<option value="20">20</option>
				<option value="30">30</option>
				<option  value="40">40</option>
			</select>
		</span>
	</div>
	<div class="span3 right">
		<img src="/images/navigation/next.png" class="next"/>
		<img src="/images/navigation/last.png" class="last"/>
	</div>
</div>

<table class="tablesorter">
	<thead> 
		<tr> 
			<th></th>
			<th>Produktnamn</th>
			<th>Pris</th>
			<th>Paketstorlek</th>
			<th>Position</th>
			<th>Händelse</th>
		</tr> 
	</thead> 
	<?php foreach($products as $product) : ?>
	<tr>
		<td class="imgwrapper">
			<img src="<?php echo $product->thumb; ?>" alt="<?php echo $product->namn .' '. $product->pris.' / kg'; ?>"/>
		</td>
		<td>
			<?php echo $product->namn;?>
		</td>
		<td>
			<?php echo $product->pris;?> kr/kg
		</td>
		<td>
			 <?php echo $product->paket; ?>kg/st
		</td>
		<td>
			<?php echo $product->pos;?></td>
		</td>
		<td>
			<button value="<?php echo $product->id;?>" class="editer">Redigera</button>
		</td>
	</tr>
	<?php endforeach; ?>
</table>

<script type="text/javascript">
(function($){
	$(document).ready(function(){
		
		$(".tablesorter").tablesorter({widthFixed: true}).tablesorterPager({
			positionFixed:false,
			cssNext : '.next',
			cssFirst : '.first',
			cssPrev : '.prev',
			cssLast : '.last',
			cssPageDisplay : '.pagedisplay',
			separator : '/',
			cssPageSixe : '.pagesize'

		}); 

		$('button.editer').click(function(e){
			var id = $(this).val();
			window.location.href = "/admin/produkter/edit/"+id;
		});
	});
})(jQuery);
</script>